<template>
  <div class="relation">
    <div class="title">
      <p class="tip">运维事件单</p>
      <div class="btn">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            导出<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-plus" @click="downloadExcel">
                导出当前页</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-circle-plus" @click="Select_downloadExcel">
                导出所有页
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <button @click="back" class="goBack">返回</button>
      </div>
    </div>
    <div class="tableBox">
      <div class="table" ref="container">
        <el-table
          :height="tableHeight"
          ref="multipleTable"
          :data="changeList"
          tooltip-effect="dark"
        >
          <el-table-column align="center" prop="groupName" label="所属工作组" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="sysName" label="所属系统" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" label="系统所处阶段" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ activation(scope.row.systemStage) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="appDutyman"
            label="所属应用系统负责人"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span>{{
                scope.row.appDutyman == 'null' || !scope.row.appDutyman
                  ? '--'
                  : scope.row.appDutyman
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sysDept" label="归属处室" show-overflow-tooltip>
            <template #default="scope">
              <span>{{
                scope.row.sysDept == 'null' || !scope.row.sysDept ? '--' : scope.row.sysDept
              }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="数量" prop="bizCount" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        ref="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { download, getFmBizBySysList, GetExportFmBizBySysList } from '@/http/api/operation';
  import { ref, onMounted, reactive, computed } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
  const changeList = reactive([]);
  // 分页
  const changeCode = ref(router.options.history.state.back.split('/')[1]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const typeNum = ref(route.params.typeNum);
  const tableHeight = ref(0);
  const container = ref(null);
  // const currentPage = ref(''); // 导出全部或者当前页标识
  onMounted(() => {
    getFmBizBySys();
    calHeight();
  });
  const getFmBizBySys = () => {
    getFmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      type: typeNum.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      (changeList as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };

  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };

  const downloadExcel = () => {
    GetExportFmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      currentPage: 'currentPage',
      type: typeNum.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  const downloadlist = (type) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  const Select_downloadExcel = () => {
    GetExportFmBizBySysList({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      currentPage: '',
      type: typeNum.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  //   const formatJson = (filterVal, Data) => {
  //     return Data.map((v) => filterVal.map((j) => v[j]));
  //   };
  const activation = computed(() => {
    return (value) => {
      switch (value) {
        case '01':
          return '需求及技术方案阶段';
          break;
        case '02':
          return '立项阶段';
          break;
        case '03':
          return '开发测试阶段';
          break;
        case '04':
          return '已转生产待投产';
          break;
        case '05':
          return '已投产未交接一线';
          break;
        case '06':
          return '已交接一线未交接二线';
          break;
        case '07':
          return '已交接二线+部分新增功能未交接';
          break;
        case '08':
          return '已交接二线';
          break;
        case '09':
          return '已下线';
          break;

        default:
          break;
      }
    };
  });
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    getFmBizBySys();
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    getFmBizBySys();
  };
  const back = () => {
    switch (changeCode.value) {
      case 'current_processing':
        router.push({
          name: changeCode.value,
          params: {
            type: typeNum.value
          }
        });
        break;
      case 'CurrentProcessList':
        {
          router.push({
            name: changeCode.value,
            params: {
              type: typeNum.value
            }
          });
        }
        break;
      case 'Operation_list':
        {
          router.push({
            name: changeCode.value,
            params: {
              type: typeNum.value
            }
          });
        }
        break;
    }
  };
</script>
<style lang="less" scoped>
  .relation {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");

    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .tip {
        height: 34px;
        line-height: 34px;
        font-size: 18px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }
      .btn {
        display: flex;
        justify-content: space-around;
        .goBack {
          background: #007af5;
          width: 80px;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
        }
        .el-dropdown {
          margin: 0px 10px;
        }
        .el-dropdown-link {
          display: inline-block;
          width: 80px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          color: #fff;
          background: #007af5;
          border-radius: 2px;
        }
      }
    }
    .tableBox {
      height: calc(100% - 44px);
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      .table {
        height: calc(100% - 44px);
        width: 100%;
        margin-bottom: 15px;
        :deep(.el-table-column--selection.is-leaf .el-checkbox) {
          display: none;
        }
        :deep(.el-table__cell.is-leaf) {
          //background: rgba(0, 0, 0, 0.1);
          // color: #6fd7f7;
          //color: #fff;
          color: #929ea8;
        }

        :deep(tr:hover > td) {
          background-color: transparent;
        }
        :deep(.el-table__empty-text) {
          //color: #fff;
          color: #929ea8;
        }
        :deep(td.el-table__cell) {
          //color: #fff;
          color: #929ea8;
        }
      }
      .el-pagination {
        height: 34px;
        padding: 0;
        box-sizing: border-box;
        width: 50%;
        :deep(.el-pagination__total) {
          font-size: 14px;
          font-weight: 400;
          color: #bbbbbb;
          line-height: 34px;
        }

        :deep(.el-input__inner) {
          height: 34px;
          //width: 60px;
          background: #fff;
          //color: #66b1ff;
          color: #46545d;
        }
        :deep(button:disabled) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(.el-pager li) {
          //background: rgba(0, 0, 0, 0.1);
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
          &.active {
            // color: #fff;
            color: #46545d;
          }
        }
        :deep(.btn-prev) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(.btn-next) {
          background: #fff;
          height: 34px;
          line-height: 34px;
          border: 1px solid #dddddd;
          //color: #66b1ff;
          color: #46545d;
          box-sizing: border-box;
        }
        :deep(span:not([class*='suffix'])) {
          color: #bbbbbb;
        }
        .el-pagination__jump {
          height: 34px;
          line-height: 34px;
        }
      }
    }
  }
</style>
